<template>
    <div>
      <!-- van-tabs:
         通过v-model绑定当前激活标签对应的索引值，默认情况下启用第一个标签
         通过animated属性可以开启切换标签内容时的转场动画
         通过swipeable属性可以开启滑动切换标签页
      -->
      <van-tabs v-model="active" animated swipeable>
        <van-tab v-for="item in channels" :title="item.name" :key="item.id">推荐相关的文章列表</van-tab>
      </van-tabs>
    </div>
  </template>
  
  <script>
  import {requestnews} from '@/api'
  import { mapActions } from "vuex";
  export default {
    name: 'index',
    data () {
      return {
        active: 0,
        channels:[]
      }
    },
    methods:{
        ...mapActions(["allChannel", "userChannel"]),
    },
    async created() {
    // 判断当前是否登录，token
    await this.allChannel();
    await this.userChannel();
    const { user, channel } = this.$store.state;
    this.channels = user.tokens ? channel.userChannel : channel.allChannel;
  },
  }
  </script>
  
  <style lang="less" scoped>
  /deep/ .van-tabs {
    width: 100%;
    .van-tab {
      border-right: 1px solid #edeff3;
      min-width: 200px;
      height: 80px;
      .van-tab__text {
        font-size: 27px;
        color: #777777;
      }
    }
  
    .van-tab--active .van-tab__text {
      color: #333 !important;
    }
    .van-tabs__line {
      width: 31px !important;
      height: 6px;
      background: rgba(50, 150, 250, 1);
      border-radius: 3px;
      bottom: 8px;
    }
    .van-tabs__nav {
      padding: 0;
    }
  }
  </style>